<template>
  <div id='app'>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in adList" :key='item.id'>
        <img :src="item.img"/>
      </van-swipe-item>
    </van-swipe>
    <course-content-list :fetchData="fetchData"></course-content-list>
  </div>
</template>

<script>
import CourseContentList from '@/components/CourseContentList.vue'
import { getAllads, getQueryCourses } from '@/services/course'

export default {
  name: 'CourseContent',
  components: {
    CourseContentList
  },
  data () {
    return {
      // 轮播图列表
      adList: []
    }
  },
  computed: {
    activeList () {
      return this.adList.filter(item => item.status === 1)
    }
  },
  methods: {
    fetchData (options) {
      return getQueryCourses(options)
    },
    async loadAds () {
      const { data } = await getAllads({
        spaceKeys: '999'
      })
      console.log(data)
      this.adList = data.content[0].adDTOList
    }
  },
  created () {
    this.loadAds()
  }
}

</script>
<style scoped>
.my-swipe{
  width: 100%;
}
.my-swipe img {
  height: 170px;
  width: 100%;
}
.course-content-list{
  top: 220px;
  bottom: 50px;
}
</style>
